<template>
  <div class="test">
    <h1>hello test</h1>

    <qf-form
      width="80px"
      :formConfig="formConfig"
      :formBtns="formBtns"
      @submit="submit2Fn"
    ></qf-form>

    <br />
    <hr />
    <br />

    <h1>原生标签</h1>
    <form action="">
      <p>
        账号：
        <input type="text" placeholder="请输入账号" />
      </p>
      <p>
        密码：
        <input type="password" placeholder="请输入密码" />
      </p>
      <p>
        <input type="submit" value="登录" />
        <input type="reset" value="重置" />
      </p>
    </form>

    <br />
    <hr />
    <br />

    <h1>表单UI组件 - 基本使用</h1>
    <el-form>
      <el-form-item label="账号" label-width="60px">
        <el-input v-model="formData.uname" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="60px">
        <el-input
          type="password"
          v-model="formData.pwd"
          clearable
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label-width="60px">
        <el-button @click="submitFn">登录</el-button>
        <el-button @click="resetFn">重置</el-button>
      </el-form-item>
    </el-form>

    <br />
    <hr />
    <br />

    <h1>表单UI组件 - 重置数据（了解</h1>
    <el-form :model="formData" ref="form3">
      <el-form-item label="账号" label-width="60px" prop="uname">
        <el-input v-model="formData.uname" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="60px" prop="pwd">
        <el-input
          type="password"
          v-model="formData.pwd"
          clearable
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label-width="60px">
        <el-button @click="submitFn">登录</el-button>
        <el-button @click="resetFn">重置</el-button>
      </el-form-item>
    </el-form>

    <br />
    <hr />
    <br />

    <h1>表单UI组件 - 表单验证（重点</h1>

    <!-- { required: true, message: '账号必须填写', trigger: 'blur' },
    { min: 3, max: 5, message: '账号在3~5个字符', trigger: 'blur' }, -->

    <el-form :model="formData" ref="form3">
      <el-form-item
        label="账号"
        label-width="60px"
        prop="uname"
        :rules="[
          {
            validator: (rule, value, callback) => {
              if (!value) return callback('账号必须填写 知道不O(∩_∩)O哈哈~');
              if (!/^\w{3,5}$/.test(value)) return callback('账号在3~5个字符~');
              return callback();
            },
            trigger: 'blur',
          },
        ]"
      >
        <el-input v-model="formData.uname" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="60px" prop="pwd">
        <el-input
          type="password"
          v-model="formData.pwd"
          clearable
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label-width="60px">
        <el-button @click="submitFn">登录</el-button>
        <el-button @click="resetFn">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// fetch(请求地址, {
//     method: '',
//     headers: {},
//     body: {uname: this.uname, pwd: this.pwd,}
//     body: this.formData
// })

export default {
  methods: {
    submit2Fn(formData) {
      console.log("收到子传递的表单数据：", formData);
    },
    submitFn() {
      //   alert("表单提交");

      //   this.$notify({
      //     title: "成功",
      //     message: "这是一条成功的提示消息",
      //     type: "success",
      //   });

      this.$refs.form3.validate((isSuccess) => {
        if (isSuccess) {
          this.$notify({
            title: "成功",
            message: "验证通过，待写发送异步请求",
            type: "success",
          });
        } else {
          // 失败不管，因为页面有红色提示
        }
      });
    },
    resetFn() {
      //   this.formData = {
      //     uname: "",
      //     pwd: "",
      //   };

      this.$refs.form3.resetFields();
    },
  },
  data() {
    return {
      //   uname: "",
      //   pwd: "",
      formData: {
        uname: "",
        pwd: "",
      },

      // 使用封装的组件
      formConfig: [
        {
          label: "账号",
          width: "",
          field: "uname",
          type: "text",
          rules: [
            { required: true, message: "账号不能为空", trigger: "blur" },
            { min: 3, max: 6, message: "长度在3~6个字符之间", trigger: "blur" },
          ],
        },
        {
          label: "密码",
          width: "",
          field: "pwd",
          type: "text",
          rules: [
            {
              validator: (rule, value, callback) => {
                // value 默认 undefined
                if (!value) return callback("请输入密码");
                return callback();
              },
              trigger: "blur",
            },
          ],
        },
      ],
      formBtns: [
        {
          content: "登录",
          type: "primary",
        },
        {
          content: "重置",
          type: "",
        },
      ],
    };
  },
};
</script>

<style></style>
